<template>
  <div class="p-6">
    <a-card title="会员设备管理" bordered>
      <a-table :columns="columns" :data="tableData" row-key="id" />
    </a-card>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const columns = [
    { title: '会员ID', dataIndex: 'memberId', align: 'center' },
    { title: '设备号', dataIndex: 'deviceId', align: 'center' },
    { title: '手机品牌', dataIndex: 'brand', align: 'center' },
    { title: '手机型号', dataIndex: 'model', align: 'center' },
    { title: '设备类型', dataIndex: 'deviceType', align: 'center' },
    { title: '最后登录时间', dataIndex: 'lastLogin', align: 'center' },
  ];

  const tableData = ref([
    {
      id: 1,
      memberId: 'M10001',
      deviceId: 'DVC-3249A',
      brand: 'Apple',
      model: 'iPhone 13 Pro',
      deviceType: '手机',
      lastLogin: '2025-04-20 14:30:00',
    },
    {
      id: 2,
      memberId: 'M10002',
      deviceId: 'DVC-9124X',
      brand: 'Samsung',
      model: 'Galaxy S22',
      deviceType: '手机',
      lastLogin: '2025-04-18 09:15:22',
    },
    {
      id: 3,
      memberId: 'M10003',
      deviceId: 'DVC-8831Q',
      brand: 'Huawei',
      model: 'P50 Pro',
      deviceType: '手机',
      lastLogin: '2025-04-19 21:44:10',
    },
    {
      id: 4,
      memberId: 'M10004',
      deviceId: 'DVC-7810K',
      brand: 'Xiaomi',
      model: 'Mi 11 Ultra',
      deviceType: '平板',
      lastLogin: '2025-04-17 17:02:45',
    },
    {
      id: 5,
      memberId: 'M10005',
      deviceId: 'DVC-5521Z',
      brand: 'OPPO',
      model: 'Find X5',
      deviceType: '手机',
      lastLogin: '2025-04-20 10:28:37',
    },
  ]);
</script>

<style scoped>
  .p-6 {
    padding: 24px;
  }
</style>
